<template>
    <div class="u-chartsBox">
        <div class="legend" :class="[symbolType,position]" v-if="!disLegend">
            <span v-for="(item,index) in legend" :key="index">
                <i :style="'background:'+ item.color +';'"></i>{{item.name}}
            </span>
        </div>
        <div class="chartsM" :id="'chartsBox_'+type+'_'+keyId"></div>
    </div>
</template>
<script>
export default {
    name:"UEchart",  
    props:{
        keyId:{},               //唯一echart
        type:{},                //图表类型
        legend: Array,
        list: Array,
        disLegend: Boolean,     //不显示标签
        symbolType:{                  //标签的图标类型 pie圆点   
            type: String,
            default: "pie"
        },
        position:{              //标签的位置  默认右上
            type: String,
            default: "right"
        },
        direction:{              //标签的位置  默认右上
            type: String,
            default: "row"
        },
    },
    data(){
        return{
        }
    },
    mounted(){
        this.getInit()
        
    },
    methods:{
        getInit(){
            
        },
    }
}
</script>
<style lang="scss" scoped>
.u-chartsBox{
	width: 100%; height: 100%;
	position: relative;
	.chartsM{
		width: 100%; height: 100%;
	}
	.legend{
        position: absolute; z-index: 2;
        font-size: 16px; color: #747e93;
		span{
			display: inline-block;
		}
		&.pie span i{
			display: inline-block;
			width: 10px; height: 10px;
			border-radius: 10px;
			margin-right: 10px;
		}
		&.right{
			top: 0;right: 0;
			span{
				margin-left: 28px;
			}
		}
		&.left{
			top: 0;left: 0;
			span{
				margin-right: 28px;
			}
		}
		&.col{
			span{
                margin: 0 0 10px 0;
				display: block;
			}
		}
	}
}
</style>